<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="文件">
        <el-upload
          :class="{ hasfile: fileList && fileList[0] && fileList[0].name }"
          :auto-upload="true"
          :action="uploadaction"
          :multiple="false"
          :headers="uploadheaders"
          :on-success="uploadsuccess"
          :show-file-list="true"
          :file-list="fileList"
          :data="uploaddata"
          :on-remove="uploadremove"
          name="file"
          drag
          accept=".docx"
        >
        </el-upload>
      </el-form-item>
    </el-form>
    <el-card
      :body-style="{ padding: '20px' }"
      v-if="serverFileList && serverFileList.length > 0"
    >
      <div slot="header">
        <span>最近上传的文件</span>
      </div>

      <el-row>
        <el-col v-for="(item, index) in serverFileList" :key="index">
          <el-button @click="getinfo(item.id)" type="primary">
            {{ item.filename }}</el-button
          >{{ item.created_at | timeformat }}
        </el-col>
      </el-row>
    </el-card>
    <vopenfile v-model="fileid" />{{ fileid }}
  </div>
</template>
<script>
import vopenfile from '@/components/dagang/openfile'
export default {
  components: { vopenfile },
  data() {
    return {
      fileList: [],
      localid: '',
      serverFileList: [],
      fileid: ''
    }
  },
  computed: {
    uploadaction() {
      return process.env.baseURL + '/api/file/'
    },
    uploadheaders() {
      return { Authorization: 'bears 1234' }
    },
    uploaddata() {
      return { owner: this.localid }
    }
  },
  mounted() {
    // this.getfiles()
    // console.log('mounted', window.localStorage)
    this.localid = this.getlocalid()
    this.getfiles()
  },

  methods: {
    getlocalid() {
      let localid = window.localStorage.getItem('localid')

      if (!localid) {
        const guid = function() {
          return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
            /[xy]/g,
            function(c) {
              const r = (Math.random() * 16) | 0
              const v = c === 'x' ? r : (r & 0x3) | 0x8
              return v.toString(16)
            }
          )
        }
        localid = guid()
        window.localStorage.setItem('localid', localid)
      }
      return localid
    },
    async getfiles() {
      const { data } = await this.$axios.get('/api/file/', {
        params: { owner: this.localid }
      })
      this.serverFileList = data
      console.log(data)
    },
    onSubmit() {},
    uploadsuccess(response, file, fileList) {
      console.log(file)
      this.fileList = [{ name: file.filename, url: file.response.file }] // [file]
      this.serverFileList.splice(0, 0, file.response)

      this.getinfo(file.response.id)
    },
    uploadremove() {
      this.fileList = []
    },
    getinfo(id) {
      this.fileid = id
      console.log('getinfo', id)
      // this.filename = file
      // this.fileurl = url
      // const { data } = await this.$axios.get('/api/docx/', {
      //   params: { file: file }
      // })
      // console.log(data)
    }
  }
}
</script>
<style lang="scss">
.hasfile {
  .el-upload {
    .el-upload-dragger {
      height: 50px;
    }
  }
}
</style>
